<script>
import draggable from 'vuedraggable'
import render from '@/utils/generator/render'
import OpinionGuide from '@/components/Custom/OpinionGuide'
import OpinionMain from '@/components/Custom/OpinionMain'
import LineChartDemo from '@/components/Echarts/LineChartDemo'
import WordCloudDemo from '@/components/Echarts/WordCloudDemo'
import PieChartDemo from '@/components/Echarts/PieChartDemo'
import PieChartDemoRose from '@/components/Echarts/PieChartDemoRose'
import BarChartDemo from '@/components/Echarts/BarChartDemo'
import LineChartDemoBase from '@/components/Echarts/LineChartDemoBase'
import StartingMedia from '@/components/Custom/StartingMedia'
import VenationOfTheEvent from '@/components/Custom/VenationOfTheEvent'
import LineChartDemoCustom from '@/components/Echarts/LineChartDemoCustom'
import LineChartDemoMediaType from '@/components/Echarts/LineChartDemoMediaType'
import BarChartDemoMediaTypeEmotion from '@/components/Echarts/BarChartDemoMediaTypeEmotion'
import HotArticle from '@/components/Custom/HotArticle'
import Opinion from "../../system/opinion/list";

const components = {
  itemBtns(h, element, index, parent) {
    const {editItem, copyItem, deleteItem} = this.$listeners
    return [
      <span class="drawing-item-update" title="修改标题" onClick={event => {
        editItem(element, parent, index);
        event.stopPropagation()
      }}>
        <i class="el-icon-edit"/>
      </span>,
      <span class="drawing-item-copy" title="复制" onClick={event => {
        copyItem(element, parent);
        event.stopPropagation()
      }}>
        <i class="el-icon-copy-document"/>
      </span>,
      <span class="drawing-item-delete" title="删除" onClick={event => {
        deleteItem(index, parent);
        event.stopPropagation()
      }}>
        <i class="el-icon-delete"/>
      </span>
    ]
  }
}
const layouts = {
  colFormItem(h, element, index, parent) {
    const {activeItem} = this.$listeners
    let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
    if (element.elementType == 1) {
      return (
        <el-col class={className}
                nativeOnClick={event => {
                  activeItem(element);
                  event.stopPropagation()
                }}>
          <el-form-item label-position="top"
                        label={element.name}>
            <span>{element.showText}</span>
          </el-form-item>
          {components.itemBtns.apply(this, arguments)}
        </el-col>
      )
    } else if (element.elementType == 3) {
      element.tag = "el-input";
      element.tagIcon = "textarea";
      element.type = 'textarea';
      element.tagIcon = 'textarea';
      element.changeTag = true;
      element.autosize = {
        minRows: 4,
        maxRows: 4
      }
      return (
        <el-col class={className}
                nativeOnClick={event => {
                  activeItem(element);
                  event.stopPropagation()
                }}>
          <el-form-item label-position="top"
                        label={element.name} required={element.required}>
            <render key={element.renderKey} conf={element} onInput={event => {
              this.$set(element, 'defaultValue', event)
            }}/>
          </el-form-item>

          {components.itemBtns.apply(this, arguments)}
        </el-col>
      )
    } else {
      if (element.name === '舆情导读') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <opinion-guide></opinion-guide>
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '主要舆情') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <opinion-main />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '事件脉络') {
        return (
          <el-col class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation()
        }}>
      <el-form-item label-position="top"
        label={element.name}>
          <venation-of-the-event />
          </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
      )
      } else if (element.name === '信息载体趋势') {
        return (
          <el-col class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation()
        }}>
      <el-form-item label-position="top"
        label={element.name}>
          <line-chart-demo-media-type />
          </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
      )
      }else if (element.name === '情感分析') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <line-chart-demo />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '高频词云') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <word-cloud-demo />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '信息情感分布') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <pie-chart-demo />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '来源类型分析') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <pie-chart-demo-rose />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '载体情感分析') {
        return (
          <el-col class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation()
        }}>
      <el-form-item label-position="top"
        label={element.name}>
          <bar-chart-demo-media-type-emotion />
          </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
      )
      }else if (element.name === '媒体来源明细') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <bar-chart-demo />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '信息走势图') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <line-chart-demo-base />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '热门文章') {
        return (
          <el-col class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation()
        }}>
      <el-form-item label-position="top"
        label={element.name}>
          <hot-article />
          </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
      )
      } else if (element.name === '首发媒体溯源') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <starting-media />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else if (element.name === '媒体传播分析') {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <line-chart-demo-custom />
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )
      }else {
        return (
          <el-col class={className}
                  nativeOnClick={event => {
                    activeItem(element);
                    event.stopPropagation()
                  }}>
            <el-form-item label-position="top"
                          label={element.name}>
              <el-image fit="contain" src={element.image} style="height:300px;width:100%"/>
            </el-form-item>
            {components.itemBtns.apply(this, arguments)}
          </el-col>
        )

      }
    }
  },
  rowFormItem(h, element, index, parent) {
    const {activeItem} = this.$listeners
    const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item'
    let child = renderChildren.apply(this, arguments)
    if (element.type === 'flex') {
      child = <el-row type={element.type} justify={element.justify} align={element.align}>
        {child}
      </el-row>
    }
    return (
      <el-col span={element.span}>
        <el-row gutter={element.gutter} class={className}
                nativeOnClick={event => {
                  activeItem(element);
                  event.stopPropagation()
                }}>
          <span class="component-name">{element.componentName}</span>
          <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
            {child}
          </draggable>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    )
  }
}

function renderChildren(h, element, index, parent) {
  if (!Array.isArray(element.children)) return null
  return element.children.map((el, i) => {
    const layout = layouts[el.layout]
    if (layout) {
      return layout.call(this, h, el, i, element.children)
    }
    return layoutIsNotFound()
  })
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.element.layout}匹配的layout`)
}

export default {
  components: {
    Opinion,
    PieChartDemo,
    render,
    draggable,
    OpinionGuide,
    LineChartDemo,
    WordCloudDemo,
    PieChartDemoRose,
    BarChartDemo,
    LineChartDemoBase,
    OpinionMain,
    StartingMedia,
    LineChartDemoCustom,
    VenationOfTheEvent,
    LineChartDemoMediaType,
    BarChartDemoMediaTypeEmotion,
    HotArticle
  },
  props: [
    'element',
    'index',
    'drawingList',
    'activeId',
    'formConf'
  ],
  render(h) {
    const layout = layouts[this.element.layout]

    if (layout) {
      return layout.call(this, h, this.element, this.index, this.drawingList)
    }
    return layoutIsNotFound()
  }
}
</script>
